<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        //innerText与innerHTML区别
        //1、innerText不识别Html标签，去除空格和换行
        //2、innerHTML识别Html标签，保留空格和换行
        //实例：今天是2021年
        // var div = document.querySelector('div');
        // div.innerHTML = '<strong>今天是</strong>：2021年'
        

        //3、根据系统的不同时间来显示不同的问候语
        //首先要根据系统的内置时间来判断，需要获得系统的日期内置对象
        //需要一个div，根据不同的时间显示不同的问候语。也就是改变元素的内容即可
        var div = document.querySelector('div');
        //获取小时
        var date = new Date();
        var h = date.getHours;
        //根据时间进行判断
        if(h < 12){
            div.innerHTML = '上午好'
        }else if( h < 18){
            div.innerHTML = '下午好'
        }else{
            div.innerHTML = '晚上好'
        }



    </script>
</body>
</html>